<template>
    <div class="Canvas">
        <canvas  width="828" height="828" id="myCanvas">

        </canvas>
        <div class="btn">
            <div  @click="cl1">点我去普通版本</div><div  @click="cl2">点我去mock 测试</div>  
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Canvas",
  data() {
    return {
      t: "",
      balls: [
        {
          temp: 0,
          temp2: 0,
          timer: "",
          x: 0,
          y: 0,
          ax: 10,
          ay: 2
        }
      ]
    };
  },
  methods: {
    cl1() {
      this.$router.push({
        path: "/home"
      });
    },
    cl2() {
      this.$router.push({
        path: "/mockdemo"
      });
    },
    drawCir(x, y, ctx) {
      ctx.beginPath();
      ctx.fillStyle = "#000";
      ctx.arc(x, y, 40, 0, 2 * Math.PI);
      ctx.fill();
      ctx.closePath();
    },
    ran() {
      return parseInt(Math.random() * 30 + 1);
    }
  },
  watch: {
    balls: function(n, o) {
      if (n.length >= 10) {
        clearInterval(this.t);
      }
    }
  },
  mounted: function() {
    this.t = setInterval(() => {
      this.balls.push({
        temp: 0,
        temp2: 0,
        timer: "",
        x: 0,
        y: 0,
        ax: 10,
        ay: 2
      });
    }, 2000);
    var c = window.document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var that = this;
    this.balls.forEach(e => {
      e.ax = this.ran();
      e.ay = this.ran();
    });
    this.timer = requestAnimationFrame(function fn() {
      //绘制白板覆盖上一个状态
      ctx.clearRect(0, 0, c.width, c.height);
      that.balls.forEach(e => {
        //根据temp状态判断球移动方向
        if (e.temp === 0) {
          e.x += e.ax;
        } else {
          e.x -= e.ax;
        }
        if (e.temp2 === 0) {
          e.y += e.ay;
        } else {
          e.y -= e.ay;
        }
        //绘制球
        that.drawCir(e.x, e.y, ctx);

        //球跑到左或者右方，切换状态
        if (e.x >= c.width - 40) {
          e.temp = 1;
          e.ax = that.ran();
        } else if (e.x <= 40) {
          e.temp = 0;
          e.ax = that.ran();
        }
        if (e.y >= c.height - 40) {
          e.temp2 = 1;
          e.ay = that.ran();
        } else if (e.y <= 40) {
          e.temp2 = 0;
          e.ay = that.ran();
        }
      });
      that.timer = requestAnimationFrame(fn);
    });
  }
};
</script>
<style scoped lang="scss">
@import "../styles/common.scss";
.Canvas {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#myCanvas {
  display: block;
  width: 414px;
  height: 414px;
  border: 1px solid lightblue;
}
.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #000000;
  color: #fff;
  line-height: 40px;
  text-align: center;
  display: flex;
  >div{
    width: 50%;
    height: 100%;
  }
}
</style>